<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 最简单的html标签+js 百度功能
    抖动 -->
    <input type="text" id="undebounce" autofocus placeholder="请输入搜索内容">
    <button id="btn">btn</button>
    <button id="cancel">取消搜索事件</button>
    <script>
        window.onload=function(){
            const input=document.querySelector('#undebounce');
            const cancel=document.getElementById('cancel');
            const btn=document.getElementById('btn');
            const consoleOne=()=>{
                console.log('one');
            }
            btn.addEventListener('click',consoleOne)
            const consoleTwo=()=>{
                console.log('two');
            }
            btn.addEventListener('click',consoleTwo)

            /* 
            @func 搜索功能
            @params {content：string} 关键字
            @return 返回结果列表
            **/
           function doInput(event){
               let keyword=event.target.value;
               ajax(keyword)
           }
            function ajax(content){
                console.log('准备实时搜索'+content);
            }
            input.addEventListener('input',(event)=>{
           //let keyword=this.value;
           //console.log(keyword)
           let keyword=event.target.value;
            //    能封装就封装 解耦
           //如果流程性代码超过10行，一定要封装
           // 搜索比较复杂  封装能力
           // 应该放到外面
           ajax(keyword);
          // console.log('准备实时搜索'+content)
    
            })
            input.addEventListener('keydown',function(event){
           if(event.keyCode==13){
               console.log('搜索吧')
           }
            })
            cancel.addEventListener('click',function(){
                input.removeEventListener('input',doInput);
                btn.removeEventListener('btn',consoleOne);
            })
        }
    </script>
</body>
</html>